<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>同城活动</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
	<style>
		body{
			font-family: "Microsoft YaHei", sans-serif;
			min-height:100vh;
			background: #fff;
			overflow-x: hidden;
		}
		.header{
			background: #2a2c33;
			z-index: 100000;
		}
		.header h1{
			color:#fff;
			font-size:18px;
		}
		.header a{
			color:#fff;
		}
		a:active{
			color:#333;
		}
		ul li{
			list-style-type: none;
		}
		.section{
			margin-top:44px;
		}
		.section .sel_list{
			height:46px;
			line-height:46px;
			width:100%;
			text-align:center;
			margin:0;
			padding:0;
			/*border-bottom:1px solid #f2f2f2;*/
			font-size:15px;
		}
		.section .sel_list>li{
			float:left;
			width:calc(100%/3);
		}
		.sel_list a{
			display: inline-block;
			width: 100%;
		}
		.sel_list a b{
			display: inline-block;
			margin-left:9px;
			border-color: #333 #fff #fff #fff;
			border-style: solid;
			border-width: 7px 5px 0 5px;
			height: 0;
			width: 0;
		}
		.content ul{
			margin:0;
			padding:0;
		}
		#main>li{
			height:110px;
			width:100%;
			overflow: hidden;
			padding:22px 12px 12px;
			border-bottom:1px solid #f2f2f2;
			position: relative;
		}
		.content ul li .view {
			float: left;
			width: 30%;
			height: 100%;
			position:relative;
		}
		.content  ul li .view #end p{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.5;
			border-radius: 3px;
			background: #000;
			width: 100%;
			height: 100%;
		}
		.content  ul li .view>#icon{
			position:absolute;
			top:0;
			left:0;
			width: 24%;
			height: 30%;
			z-index: 100;
			top: 0;
			left: 0;
			background-size: 30%;
		}
		#end{
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:120;

		}
		.c0{
			display: none;
		}
		.c1{
			display: block;
		}
		.c2{
			display: none;
		}
		.content ul li .view span{
			color:#fff;
			opacity: 0.7;
			font-size:16px;
			display: inline-block;
			width:100%;
			position:absolute;
			top:30%;
			text-align: center;
			z-index: 10;

		}
		.content  ul li .address{
			float:left;
			width:70%;
			/*height:100%;*/
			padding-left:3%;
			overflow: hidden;

		}
		.view img:first-child{
			width:100%;
			height:100%;
			border-radius: 3px;
			vertical-align: middle;
		}
		.address ul{
			height:100%;
		}
		.content ul li .address ul li{
			font-size:13px;
			color:#999;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:1;
			overflow: hidden;
		}
		.content ul li .address>ul>li:first-child{
			font-size:16px;
			padding-top:0;
			color:#333;
			/*font-size:54px;*/
		}
		.address ul li:last-child{
			font-size:11px;
			text-align:right;
			float:right;
			width: 100%;
			height: 100%;
		}
		.active{
			border-bottom:1px solid #FC635C;
			color:#FC635C;
		}
		.noactive{
			border-bottom:1px solid #f2f2f2;
			color:#333;
		}
		/*活动类型*/
		.sel_list{
			position:relative;
		}
		#mold{
			position:absolute;
			top:47px;
			right:0;
			width:100%;
			min-height:100vh;
			z-index: 130;
			background:rgba(0,0,0,.4);
			text-align: left;
		}
		#mold p{
			margin:0;
			background: #fff;
			padding:0 2%;
		}
		#mold span{
			width:calc(79%/4);
			margin:12px 2%;
			padding:0;
			background: #f2f2f2;
			color:#333;
			border-radius: 3px;
			height:37px;
			line-height:37px;
			display: inline-block;
			font-size:15px;
			text-align: center;
		}
		/*置顶活动*/
		.hot{
			display:inline-block;
			width:21px;
			height:21px;
			background: url("../../images/city_life/hot.png") no-repeat 0px 1px;
			background-size: 75%;
			vertical-align: middle;
		}
		/*类型*/
		.hide{
			display: none;
		}
		.visible{
			display: block;
		}
		/*小三角*/



		.title{
			font-size:50px;
		}
		/*.mui-scroll-wrapper {
		    position: absolute;
		    z-index: 10000;
		    top: 0px;
		    bottom: 0;
		    left: 0;
		    overflow: hidden;
		    width: 100%;
		}
		*/
		
		#nosee{
			background: url(../../images/my/index/null.png) no-repeat 50% 55%;
    		background-size: 44%;
			/*margin: 0 28%;*/
			min-height:100vh;
			width:100%;
			position: absolute;z-index: 10;
		}
	</style>
</head>
<body>
		<div id="pullrefresh" class="content mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id='main'>
					
				</ul>
			</div>
		</div>

	<p id="nosee" style="display: none;text-align:center;"></p>
	<div>

	</div>
	<script src="../../plugins/mui/mui.min.js"></script>
	<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
	<script src="../../js/getApiToken.js"></script>
	<script src="../../js/md5.js"></script>
	<script>
		var page_cnt=12;
		
		mui.init({
              pullRefresh:{
				//上拉加载
				container:"#pullrefresh",
				up:{
					height:50,
					auto:false,
					contentrefresh:"正在加载...",
					contentnomore:'没有更多数据了',
					callback:function pullfresh(){
						if(true){
							myAjax('home/Activity/getMoreList','get',{page_cnt:page_cnt,type:2},
								function(data){
									console.log(JSON.stringify(data));
									for(var i = 0; i < data.data.length; i++){
//										console.log(Object.keys(data).filter(key=>!isNaN(+key)).length);//去除success为true那个字段
										
										console.log(JSON.stringify(data));
										if(data.data.length!=0){
											var up_html=s_html(data.data[i].id,data.data[i].front_cover,data.data[i].icon,data.data[i].is_end,data.data[i].name,data.data[i].start_time,data.data[i].end_time,data.data[i].address,data.data[i].create_time,data.data[i].sort);
									$('#main').append(up_html);
										}
										if(data.data.length<page_cnt){

												mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
											}else{
												mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
											}

									}
								}
							)
						}
					}
				}
			}
		});
		var this_t='最新';
		mui.plusReady(function(){
			
            plus.nativeUI.showWaiting();
//			console.log('....');
			//数据交互
			myAjax('home/Activity/getActivityList','get',{},
				function (data) {
                    plus.nativeUI.closeWaiting();
					if (data.success) {
						//输出一下测试
						console.log(JSON.stringify(data));
//						console.log('activity_2')
						//最新===数据
						for (var i = 0; i < data.hots.length; i++) {
								if(data.hots.length>0){
									$("#nosee").css('display', 'none');
									var hots_html=s_html(data.hots[i].id,data.hots[i].front_cover,data.hots[i].icon,data.hots[i].is_end,data.hots[i].name,data.hots[i].start_time,data.hots[i].end_time,data.hots[i].address,data.hots[i].create_time,data.hots[i].sort);
									$('#main').append(hots_html);
								}else{
									$("#nosee").css('display', 'block');
								}
							}
						//长度为0
						if(data.hots.length==0){
							$("#nosee").css('display', 'block');
						}else{
							$("#nosee").css('display', 'none');
						}
							if(data.hots.length<page_cnt){
								mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
							}	
						}
					}
			)
			
			
			//进入下一页
			$('#pullrefresh').on('tap','.li',function(e){
				var tag_id=$(this).attr('id');
				console.log(tag_id);
				mui.openWindow({
					url:'activity_apply.html',
					id:'activity_apply',
					waiting:{
						autoShow:true,//自动显示等待框，默认为true
						title:'正在加载...',//等待对话框上显示的提示内容
					},
					show:{
						autoShow:true,
						aniShow:'fade-in'
					},
					extras:{
						pageid:tag_id,
						type:0
					}
				})
			});
		})
		
		//页面函数
		function s_html(id,path,icon,is_end,name,start_time,end_time,address,create_time,sort){
			//判断置顶
			if(sort==0){
				var c='<li>' +create_time+ '</li>'
			}else{
				var c='<li>' + '<span class="hot">' + '</span>' + create_time+ '</li>'
			}
			return '<li id="' +id+ '" class="li">' +
						'<div class="view">' +
							'<img src="' +_baseUrl+path + '" alt="">' +
							'<img src="' +_baseUrl+ icon + '" alt="" id="icon" style="position:absolute;left:0;top:0;">' +
							'<div id="end" class="c' +is_end + '">' +
								'<p>' + '</p>' +
								'<span>' + '已结束' + '</span>' +
							'</div>' +
						'</div>' +
						'<div class="address">' +
							'<ul>' +
								'<li>' +name + '</li>' +
								'<li>' + '时间：' + start_time + '—'+end_time+'</li>' +
								'<li>' + '地点：' +address + '</li>' +
								c +
							'</ul>' +
						'</div>' +
					'</li>';			
		}
	</script>
</body>
</html>
